<template>
	<view>
		<view class="title">我的课程</view>
		<view class="row-box" style="justify-content: space-between;" @touchstart="touchStart" @touchend="touchEnd">
			<view v-for="(item,index) in dates" class="date-item" :class="{ dateactive: item.weekday==checkWeekday}" @click="checkDay(item.date)">
				<view class="date1">{{item.weekday}}</view>
				<view class="date2">{{item.day}}</view>
			</view>
		</view>
		<view>
			<view class="row-box" style="justify-content:flex-start;margin: 48rpx 0 16rpx;">
				<view class="date">{{ checkWeekday2 }}</view>
				<view class="head-title">本周课程</view>
			</view>
			<view v-for="(item,index) in list">
				<view class="item" :class="{ active: item.active==1}">
					<view style="position: relative; width: 190rpx;">
						<view class="row-box" style="height: 36rpx;">
							<view class="time">{{item.lessonHourTime}}</view>
							<view style="width: 30rpx; display: flex;justify-content: center; align-items: center;">
								<view class="dot"></view>
							</view>
						</view>
						<view class="line"></view>
					</view>

					<view class="content " :class="{ dateactive2: (sTimeWithinRange(item.lessonHourTime) && (item.lessonDate == dateFormat(new Date())))}">
						<view>
							<!-- <view class="title">{{item.title}}</view> -->
							<view class="title">{{item.recurePlan.serviceName}}</view>
							<view class="name">{{item.recureTeacherName}}</view>
						</view>
						<image v-if="item.lessonDate < dateFormat(new Date())" class="over" src="../static/icon/over.png"></image>
						<view class="btn" @click="startTrain(item.id)" v-if="(sTimeWithinRange(item.lessonHourTime) && (item.lessonDate == dateFormat(new Date())))">开始训练</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-class",
		data() {
			return {
				// 获取当前日期
				now: new Date(),
				checkWeekday: '',
				checkWeekday2: '',
				// 存储日期和星期的数组
				dates: [],
				list2: [{
					lessonHourTime: "10:00-11:30",
					title: "训练项目一",
					recureTeacherName: "王晓丽",
				}, {
					lessonHourTime: "14:00-15:30",
					title: "训练项目三",
					recureTeacherName: "赵琳",
					active: 1
				}, {
					lessonHourTime: "16:00-17:30",
					title: "训练项目五",
					recureTeacherName: "曹胜杰",
				}, {
					lessonHourTime: "16:00-17:30",
					title: "训练项目四",
					recureTeacherName: "李友亮",
				}],
				list: [],
				//初始化点击位置的x坐标
				startX:0,
			};
		},
		mounted() {
			let now = new Date(); // 获取当前日期
			this.getDatas(now);
		},
		methods: {
			addWeek(addDay) {
				let date = this.now; // 获取当前日期
				date.setDate(this.now.getDate() + addDay);
				this.now = date;
				this.getDatas(date);
			},
			getDatas(now) {
				this.dates = [];
							
				let firstDay = new Date(now.getFullYear(), 0, 1).getDay(); // 获取本年度第一天是星期几
				let dayOfWeek = now.getDay(); // 获取今天是星期几
				let weekNum = Math.ceil((now - new Date(now.getFullYear(), 0, (firstDay === 0 ? 7 : firstDay))) / 86400000 / 7); // 计算本年度第几周
				let currentDay = (dayOfWeek === 0 ? 7 : dayOfWeek) - 1; // 获取今天是这个星期的第几天（星期一开始）

				// 循环计算前4天到后2天的日期  星期一(0)：0-6   星期三(2)：-2-4
				for (let i = 0 - currentDay; i < 7 - currentDay; i++) {
					const date = new Date(now);
					date.setDate(date.getDate() + i);

					// 获取日期数和星期几
					const day = date.getDate();
					const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()];
					if (i == 0) {
						this.checkDay(date);
					}
					// 添加到数组中
					this.dates.push({
						day,
						weekday,
						date,
					});
				}
			},
			dateFormat(date) {
				if (date == null || date == '') {
					return 0;
				}
				// 获取年、月、日
				const year = date.getFullYear();
				const month = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
				const day = (date.getDate() < 10 ? '0' : '') + date.getDate();

				// 将年、月、日拼接成字符串
				const dateFormatStr = `${year}${month}${day}`;

				//console.log(dateFormatStr); // 输出：YYYYMMDD格式的日期字符串
				return dateFormatStr;
			},
			startTrain(id) {
				uni.navigateTo({
					// url: "/pages/my/rehabilitation-plan-detail"
					url: "/pages/my/train-detail?id=" + id
				});
			},
			sTimeWithinRange(timeRange) {
				const [start, end] = timeRange.split("-");
				const now = new Date();
				const startTime = new Date(`${now.toDateString()} ${start}`);
				const endTime = new Date(`${now.toDateString()} ${end}`);
				// 如果 endTime 在 start 之前，则跨天，需要在 endTime 加一天
				if (endTime < startTime) {
					endTime.setDate(endTime.getDate() + 1);
				}
				return now >= startTime && now <= endTime;
			},
			checkDay(date) {
				const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()];
				const weekday2 = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][date.getDay()];
				this.checkWeekday = weekday;
				this.checkWeekday2 = weekday2;
				const dateFormatStr = this.dateFormat(date);
				uni.request({
					url: "https://guokang365.mordo-care.com/api/recureLesson/searchListAll",
					method: 'POST',
					//仅为示例，并非真实接口地址。
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
					},
					data: {
						// "page": {
						// 	"pageno": 1,
						// 	"pagesize": 100
						// },
						"orders": [{
							"column": "lessonHourTime",
							"type": "asc"
						}],
						"conditions": [{
							"name": "memberId",
							"operate": "eq",
							"value": getApp().globalData.memberId + ""
						}, {
							"name": "lessonDate",
							"operate": "eq",
							"value": dateFormatStr
						}],
						"cascades": [{
							"column": "recurePlan",
						}],
					},
					success: (res) => {
						if (res.data.result != '100') {
							// 获取会员统计数据失败，不确定是否要弹窗
						} else {
							// todo 展示列表
							this.list = res.data.list;
						}
					},
				});
				// uni.navigateTo({
				// 	// url: "/pages/my/rehabilitation-plan-detail"
				// 	url: "/pages/my/train-detail"
				// });
			},
			/**
			* 触摸开始
			* @param {Object} e
			*/
		    touchStart: function (e) {
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX=e.touches[0].clientX;
				}
			},
			/**
			 * 触摸结束
			 * @param {Object} e
			 */
			touchEnd: function (e) {
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					let diff = endX-this.startX;
					if(Math.abs(diff)>20){
						if(diff>0){
							this.addWeek(-7);
							console.log("左滑...");
						}else{
							this.addWeek(7);
							console.log("右滑...");
						}
					}
				}
			},
		}
	}
</script>

<style lang="less">
	.row-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.date {
		width: 134rpx;
		text-align: end;
		font-size: 27rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #393939;
		line-height: 37rpx;
	}

	.head-title {
		height: 37rpx;
		font-size: 27rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #393939;
		line-height: 37rpx;
		margin-left: 70rpx;
	}

	.title {
		font-size: 31rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bolder;
		color: #393939;
		line-height: 42rpx;
		margin-bottom: 27rpx;
		margin-left: 8rpx;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

		.line {
			width: 1px;
			height: 100%;
			background: #DEDEDE;
			position: absolute;
			right: 24rpx;
			top: 25rpx;
			z-index: 1;
		}

		.time {
			height: 36rpx;
			font-size: 25rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #474747;
			line-height: 36rpx;
			width: 150rpx;
		}

		.dot {
			width: 18rpx;
			height: 18rpx;
			background: #42AE49;
			border-radius: 50%;
			z-index: 2;
		}

		.content {
			width: 458rpx;
			padding: 21rpx 33rpx 25rpx 26rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			border: 1rpx solid #42AE49;
			box-sizing: border-box;
			margin-bottom: 25rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				height: 37rpx;
				font-size: 27rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bolder;
				color: #42AE49;
				line-height: 37rpx;
				margin-bottom: 13rpx;
			}

			.name {
				height: 30rpx;
				font-size: 22rpx;
				margin-left: 9rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #42AE49;
				line-height: 30rpx;
			}
		}

		.dateactive2 {
			background: linear-gradient(180deg, #4EC459 0%, #4CB853 100%);

			.title {
				height: 37rpx;
				font-size: 27rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bolder;
				color: #fff;
				line-height: 37rpx;
				margin-bottom: 13rpx;
			}

			.name {
				height: 30rpx;
				font-size: 22rpx;
				margin-left: 9rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #fff;
				line-height: 30rpx;
			}
		}
	}

	.active .dot {
		width: 29rpx;
		height: 29rpx;
		background: #FFFFFF;
		border: 6rpx solid #1AC850;
		border-radius: 50%;
		box-sizing: border-box;
		z-index: 2;
	}

	.active .content {
		background: #4CB853;

		.title,
		.name {
			color: #FFFFFF;
		}
	}

	.date-item {
		width: 82rpx;
		height: 114rpx;
		background: #F5F5F5;
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.date1 {
			font-size: 24rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #3F3F3F;
			line-height: 34rpx;
		}

		.date2 {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #3F3F3F;
			line-height: 39rpx;
		}
	}

	.dateactive {
		background: linear-gradient(180deg, #6ADC71 0%, #3DAD44 100%);

		.date1,
		.date2 {
			color: #FFFFFF;
		}
	}

	.btn {
		width: 153rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		font-size: 27rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4CB753;
		line-height: 56rpx;
		text-align: center;
	}

	.btn2 {
		width: 153rpx;
		height: 56rpx;
		background: #4CB753;
		border-radius: 32rpx;
		font-size: 27rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}

	.over {
		width: 90rpx;
		height: 45rpx;
		margin-left: 340rpx;
		margin-top: -80rpx;
		position: fixed;
	}
</style>